<template>
  <div class="property-page">
    <!-- 第一行 -->
    <div class="row-1">
      <div class="col-1">
        <WorkOrder title="当月维修单总量" :list="propertyInfo.repairOrderList" />
        <WorkOrder
          class="property-compaint-order"
          title="当月投诉单总量"
          :list="propertyInfo.complaintOrderList"
        />
        <ServicePersonRatio :list="propertyInfo.servicePersonRatio" />
      </div>
      <div class="col-2">
        <CommunitySummary :data="propertyInfo.summary" />
        <div class="col-2__footer">
          <CommunityCategory :list="propertyInfo.category" />
          <CommunityReconstruction />
        </div>
      </div>
      <div class="col-3">
        <CommunityVideo :video-src="propertyInfo.videoSrc" />
        <CommunityRank :list="propertyInfo.rankList" />
        <RedPropertyRatio :list="propertyInfo.redPropertyRatio" />
      </div>
    </div>
  </div>
</template>

<script>
import Bg from '@/assets/bg-placeholder.jpg'
import WorkOrder from './components/WorkOrder.vue'
import ServicePersonRatio from './components/ServicePersonRatio.vue'
import CommunitySummary from './components/Summary.vue'
import CommunityCategory from './components/CommunityCategory.vue'
import CommunityReconstruction from './components/CommunityReconstruction.vue'
import CommunityVideo from './components/CommunityVideo.vue'
import CommunityRank from './components/CommunityRank.vue'
import RedPropertyRatio from './components/RedPropertyRatio.vue'

import collapse from '@/assets/collapse.png'

export default {
  components: {
    WorkOrder,
    ServicePersonRatio,
    CommunitySummary,
    CommunityCategory,
    CommunityReconstruction,
    CommunityVideo,
    CommunityRank,
    RedPropertyRatio
  },
  data () {
    return {
      collapse,
      bg: Bg
    }
  },
  beforeCreate () {
    this.$http.get("mockConfig.json").then(res => {
      this.$store.commit('SET_PROPERTY_INFO', res.body.propertyInfo)
    })
  },
  computed: {
    propertyInfo () {
      return this.$store.getters.propertyInfo
    }
  }
}
</script>

<style lang="scss">
.property-page {
  height: 100%;
  width: 100%;
  pointer-events: none;
  padding: 0 $base * 10px $base * 10px $base * 10px;
  .row-1 {
    display: flex;
    height: 100%;
    .col-1 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .col-2 {
      flex: 1;
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      // padding: $base*20px $base*10px 0 $base*10px;
      padding: $base * 20px 0 0 0;
      align-items: center;

      .col-2__footer {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .col-3 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .property-compaint-order {
    // margin-top: $base * 10px;
  }
}
</style>